<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float样式</title>
  <style>
    #nav {
      border:1px solid red;
    }
    #nav li {
      list-style: none;
    }
    li.l1 {
      border:1px solid #aaa;
      float:left;/*注意，右对齐是不能使用float:right的。会改变内容的顺序的*/
    }
    /*
    当写了float之后，所有li的容器都不会再占有空间，对于父容器ul而言，就没有任何高度，此时需要在写了float标签的同级中增加clear设置
    特别注意:如果父类中使用的是层级选择器#nav li，此时使用class的来清楚clear是不起作用的，因为层级选择器会覆盖
    */
    *.clear {
      clear:both;/*把两边的float取消*/
    }
  </style>
</head>
<body>
  <ul id="nav">
    <li class="l1">测试链接1</li>
    <li class="l1">测试链接2</li>
    <li class="l1">测试链接3</li>
    <li class="l1">测试链接4</li>
    <li class="l1">测试链接5</li>
    <li class="l1">测试链接6</li>
    <li class="l1">测试链接7</li>
    <li class="l1">测试链接8</li>
    <li class="clear"></li>
  </ul>
</body>
</html>